// 自定义指令
import { App } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
export default {
  install(app: App) {
    app.directive('lazy', {
      // el是dom元素  binding
      mounted(el, binding) {
        //设置默认图
        el.src = defaultImg
        console.log('lazy',binding.value);
        
        // 实时监听el是否可见  如果可见 给他的src设置binding.value
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = binding.value
            //停止
            stop()
          }
        })

        el.addEventListener('error',() => {
          // console.log('失败1111')
          // 设置默认图
          el.src = defaultImg
        })
      }
    })
  }
}